<template>
    <div>
        <ButtonGroup style="margin:10px 10px">
            <Button type="success" @click="add">
                新增
            </Button>
            <Button type="error" @click="deleteClick">
                删除
            </Button>
        </ButtonGroup>
        请选择类别：
        <select v-model="formItem2.select" @change="changeMenu2(formItem2.select)">
          <option value="all">所有</option>
          <option v-for="(data,i) in $store.state.zeroarr" :key="i" :value="data.id">{{data.title}}</option>
        </select>
        <select v-if="formItem2.select!='all'" v-model="formItem2.select2" @change="changeMenu2(formItem2.select,2)">
          <option v-for="(data,i) in $store.state.zeroarr2" :key="i" :value="data.id">{{data.title}}</option>
        </select>
        <Table @on-selection-change="select" style="margin:0 10px;" :loading="loading" border ref="selection" :columns="columns4" :data="MsbdList"></Table>
        <Page :total="pageObj.total" style="margin:10px;" @on-change="jumpPage" />
        <Modal v-model="modal" title="新增" @on-ok="saveBtn">
            <Form :model="formItem" :label-width="80">
                <FormItem label="类别名称">
                    <Input v-model="formItem.title" placeholder="请输入类别名称..." />
                </FormItem>
                <FormItem label="Select">
                    <Select v-model="formItem.select"  @on-change="changeMenu(formItem.select)">
                        <Option v-for="(data,i) in $store.state.zeroarr" :key="i" :value="data.id">{{data.title}}</Option>
                    </Select>
                </FormItem>
                <FormItem label="Select" v-if="formItem.select">
                    <Select v-model="formItem.select2">
                        <Option v-for="(data,i) in $store.state.zeroarr2" :key="i" :value="data.id">{{data.title}}</Option>
                    </Select>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions, mapMutations } = createNamespacedHelpers("Types");
export default {
  data() {
    return {
      columns4: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          type: "index",
          width: 60,
          align: "center"
        },
        {
          title: "类别名称",
          key: "title"
        }
      ],
      formItem: {},
      formItem2:{
        select:'all'
      },
      shopsize: "",
      modal: false,
      seleform: []
    };
  },
  methods: {
    ...mapActions(["getMsbdList", "jumpPage", "save", "delete", "getZero",'getpid','getpid2','fiflter']),
    ...mapMutations(["setisupdata"]),
    select(form) {
      this.seleform = form;
    },
    changeMenu(pid){
        // this.getpid(pid)
        this.$store.dispatch('getpid',pid)
    },
    changeMenu2(pid,a){
        if(!a){
         this.$store.dispatch('getpid',pid)
          this.formItem2.select2=''
        }
        this.fiflter(this.formItem2)
    },
    saveBtn() {
      this.save(this.formItem).then(()=>{
        this.seleform=[]
        this.formItem2={
          select:'all'
        }
      })
    },
    add() {
      this.modal = true;
      this.setisupdata(false);
      this.formItem = {};
    },
    updata() {
      if (this.seleform.length != 1) {
        this.$Message.warning("请选择一项进行修改!");
        return;
      }
      this.modal = true;
      this.setisupdata(true);
      this.formItem = this.seleform[0];
    },
    deleteClick() {
      if (this.seleform.length == 0) {
        this.$Message.error("请选择需要删除的项!");
        return;
      }
      if (!confirm("确定删除该项吗！")) return;
      this.delete(this.seleform).then(() => {
        this.seleform = [];
      });
    }
  },
  mounted() {
    this.getMsbdList();
    this.$store.dispatch('getZero')
  },
  computed: {
    ...mapState(["MsbdList", "loading", "pageObj", "isupdata", "zeroarr",'pidarr','pidarr2'])
  }
};
</script>

<style>
</style>
